extends layout
block content
    style.
      .skills-youll-learn .fa {font-size: 80px;color: #b6a57d;}
      h2 {text-align:center;}
    .row
      .cover
        .cover-text
          h1 开启你的软件工程师生涯
          p.lead.cover-text-secondary Learn to code and help nonprofits
          // buttons
          a.btn.btn-orange.btn-lg.btn-extra-padding.button-landing-page(href='/challenges/learn-how-free-code-camp-works', role='button') 开始闯关
          a.btn.btn-inverse.btn-lg.button-landing-page(href='/signin', role='button') 免费注册登录
    section.howitworks
      .container
        h2 玩转FreeCodeCamp
        .row
          .col-sm-6
            .col-md-6.col-howitworks
              img(src='/images/landingIcons_connect.svg')
              h3 加入全球四十万开发者社区
            .col-md-6.col-howitworks
              img(src='/images/landingIcons_learn.svg')
              h3 一起编程闯关、完成挑战
          .col-sm-6
            .col-md-6.col-howitworks
              img(src='/images/landingIcons_portfolio.svg')
              h3 构建解决现实问题的作品集
            .col-md-6.col-howitworks
              img(src='/images/landingIcons_nonprofits.svg')
              h3 帮助非盈利组织开发项目
    .row
     section#curriculum
      .container
        h2 课程大纲
        .row
          .col-md-6
            #curriculum-hours
              p 前端开发(400小时)
              p 数据可视化(400小时)
              p 后端开发(400小时)
              p 非盈利项目(800小时)
              p 面试攻略(80小时)
          .col-md-6
            p#curriculum-explanation
              | 学完所有的课程可以获得4个证书。
              | 你的雇主可以随时在FCC上查询到这些证书。
              strong FCC上所有的东西都是免费的，证书也不例外。
              | 我们推荐按照顺序来闯关，但是你也可以自由跳跃。
              | 前面三个证书每个需要400小时，
              | 最后一个证书需要800小时，来为非盈利组织构建真实的项目。
    .row(style="background-image: linear-gradient(#fff,#F1FEF2);")
     section
      .container
        h2 课外提升
        .row
          .col-md-6
           #sdkcn-1 正在获取文章...
          .col-md-6
           #sdkcn-2 正在获取文章...
        script var article = function(data) { var rows=7; var html = '<ul>';var count=(data.length>rows?rows:data.length); for(var i=0;i<count;i++){ html += '<li style="padding-bottom:10px"><a target="_blank" style="font-size: 19px" href="'+data[i].article_url+'"><span class="ion-ios-circle-outline"></span>&nbsp;&nbsp;'+data[i].title+'</a></li>' }; html += '</ul>'; document.getElementById("sdkcn-1").innerHTML = html;    if(data.length>rows) { html = '<ul>';count = (data.length>2*rows?2*rows:data.length);for(var i=rows;i<count;i++){ html += '<li style="padding-bottom:10px"><a target="_blank" style="font-size: 19px;" href="'+data[i].article_url+'"><span class="ion-ios-circle-outline"></span>&nbsp;&nbsp;'+data[i].title+'</a></li>' }; html += '</ul>'; document.getElementById("sdkcn-2").innerHTML = html; }};
        script(src='https://www.sdk.cn/api/article/devecho?callback=article')
    .row
     section.skills-youll-learn
      .container
        h2 技术栈
        .row
          .col-xs-6.col-md-3.skills
            i.fa.ion-social-html5
            br
            | HTML5
          .col-xs-6.col-md-3.skills
            i.fa.ion-social-css3
            br
            | CSS3
          .col-xs-6.col-md-3.skills
            i.fa.ion-social-javascript
            br
            | Javascript
          .col-xs-6.col-md-3.skills
            i.fa.fa-database
            br
            | Databases
        .row
          .col-xs-6.col-md-3.skills
            i.fa.ion-social-github
            br
            | Git &amp; GitHub
          .col-xs-6.col-md-3.skills
            i.fa.ion-social-nodejs
            br
            | Node.js
          .col-xs-6.col-md-3.skills
            img(src='/images/react.svg')
            br
            | React.js
          .col-xs-6.col-md-3.skills
            img(src='/images/d3-logo.svg')
            br
            | D3.js
    .row
     section#infobox
      .container
        #infobox-inner
          | Free Code Camp 已经被证明是获取编程工作的最有效路径，事实上，没人完成了所有课程，因为他们都在完成之前就找到了工作。

    .text-center
        h2 学员案例
        .spacer
        .row
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="/images/nsvNixW.jpg", alt="Meta's testimonial image")
                .button-spacer
                span 我是一个家庭妇女
                br
                span 通过FreeCodeCamp
                br
                span 我设计了很多简洁优雅的界面
                br
                span 这让我获得了一份网页设计师的工作
                h4 -- Meta Hirschl
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="/images/QPpjPac.jpg", alt="Brian's testimonial image")
                .button-spacer
                span 我是一个退伍伤残老兵
                br
                span 通过FreeCodeCamp
                br
                span 我制作了很多复杂交互的UI
                br
                span 这让我获得了一份Web前端工程师的工作
                h4 --Brian Grant
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="/images/wjlDigg.jpg", alt="Maxim Orlov's testimonial image")
                .button-spacer
                span 我是一个大叔
                br
                span 通过FreeCodeCamp
                br
                span 我开发了很多功能复杂而且稳定的API
                br
                span 这让我获得了一份Web后端工程师工作
                h4 -- Maxim Orlov
        .spacer
        .row
            .col-xs-12.col-sm-8.col-sm-offset-2
                // buttons
                a.btn.btn-orange.btn-lg.btn-extra-padding.button-landing-page(href='/challenges/learn-how-free-code-camp-works', role='button') 开始闯关
                a.btn.btn-green-inverse.btn-lg.button-landing-page(href='/stories', role='button') 倾听更多学员的心声
